import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Alert, Skeleton, Anchor, Col, Row } from 'antd';
import { defaultFormatResult, useRequest } from '@/hooks';
import {
    fetchEmployeeArchivesData,
    saveEmployeeBasicInfo,
    saveEmployeeEmergencyData,
    saveEmployeeEducationalData,
    saveEmployeeWorkData,
    saveEmployeeFamilyData,
    saveEmployeeTrainingData,
    saveEmployeeAwardData,
    saveLanguages,
    saveSkill
} from '@/pages/EntryManage/services';
import SkillSection from '@/pages/EntryManage/components/EmployeeArchives/components/SkillSection';
import BasicInfoSection from '@/pages/EntryManage/components/EmployeeArchives/components/BasicInfoSection';
import WorkExperienceSection from '@/pages/EntryManage/components/EmployeeArchives/components/WorkExperienceSection';
import EmergencyContactSection from '@/pages/EntryManage/components/EmployeeArchives/components/EmergencyContactSection';
import EducationalExperienceSection from '@/pages/EntryManage/components/EmployeeArchives/components/EducationalExperienceSection';
import FamilyMemberSection from '@/pages/EntryManage/components/EmployeeArchives/components/FamilyMemberSection';
import TrainingExperienceSection from '@/pages/EntryManage/components/EmployeeArchives/components/TrainingExperienceSection';
import AwardRecordSection from '@/pages/EntryManage/components/EmployeeArchives/components/AwardRecordSection';
import LanguagesSection from '@/pages/EntryManage/components/EmployeeArchives/components/LanguagesSection';
import cn from 'classnames';
import { getTabContainer } from '@/utils/utils';

import styles from './components/index.less';

/**
 * 员工的档案信息
 * 重构! 原先的档案信息使用的是 dva 做数据流, 导致多标签页的时候会有数据异常
 * @param employeeCode 员工id
 * @param readonly 是否只读
 * @param isEntryGuide 是否是入职引导
 * @returns {*}
 * @constructor
 */
const EmployeeArchives = ({ employeeCode, readonly, isEntryGuide = false }) => {
    // 获取数据
    const {
        data: employeeArchivesData,
        mutate: employeeArchivesInfoMutate,
        error: fetchEmployeeArchivesInfoError,
        loading: fetchEmployeeArchivesInfoLoading,
        cancel: fetchEmployeeArchivesInfoCancel
    } = useRequest(() => fetchEmployeeArchivesData(employeeCode), {
        cacheKey: `entry-employee-baseInfo-${employeeCode}`,
        cacheTime: 3600000,
        refreshDeps: [employeeCode],
        ...defaultFormatResult
    });
    // 更新数据, 这个页面有多个部分, 每个部分数据单独在组件内部维护, 保存之后会触发父级组件刷新数据.
    const handleUpdateEmployeeData = changedData => {
        employeeArchivesInfoMutate(oldDta => ({ ...oldDta, ...changedData }));
    };

    const isLoading = !employeeArchivesData; // 因为使用了骨架屏, 判断是否显示骨架屏的依据应该是否数据已经加载完成

    // 如果组件在请求过程中被销毁, 取消请求
    useEffect(() => fetchEmployeeArchivesInfoCancel, [fetchEmployeeArchivesInfoCancel]);

    // 错误处理
    if (fetchEmployeeArchivesInfoError || (!fetchEmployeeArchivesInfoLoading && !employeeArchivesData)) {
        return <Alert type="error" message={fetchEmployeeArchivesInfoError?.msg || '员工数据加载失败'} />;
    }

    return (
        <div className={cn(isEntryGuide && styles.entryGuideStyle)}>
            {/* 使用 employeeArchivesData 做loading 条件, 是想使用缓存, 有缓存信息就直接显示 */}
            <Skeleton loading={isLoading} active>
                {employeeArchivesData && (
                    <Row gutter={24} className="archivesContainer">
                        <Col span={20}>
                            {/* 个人信息 */}
                            <div id="BasicInfo">
                                <BasicInfoSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={handleUpdateEmployeeData}
                                    saveAction={saveEmployeeBasicInfo}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 紧急联系人 */}
                            <div id="EmergencyContact">
                                <EmergencyContactSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={handleUpdateEmployeeData}
                                    saveAction={saveEmployeeEmergencyData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 工作经历 */}
                            <div id="WorkExperience">
                                <WorkExperienceSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={handleUpdateEmployeeData}
                                    saveAction={saveEmployeeWorkData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 教育经历 */}
                            <div id="EducationalExperience">
                                <EducationalExperienceSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={eduList => handleUpdateEmployeeData({ eduList })}
                                    saveAction={saveEmployeeEducationalData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 家庭成员 */}
                            <div id="FamilyMember">
                                <FamilyMemberSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={familyList => handleUpdateEmployeeData({ familyList })}
                                    saveAction={saveEmployeeFamilyData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 培训经历 */}
                            <div id="TrainingExperience">
                                <TrainingExperienceSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={trainList => handleUpdateEmployeeData({ trainList })}
                                    saveAction={saveEmployeeTrainingData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 获奖记录 */}
                            <div id="AwardRecord">
                                <AwardRecordSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={awardList => handleUpdateEmployeeData({ awardList })}
                                    saveAction={saveEmployeeAwardData}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 语言能力列表 */}
                            <div id="Languages">
                                <LanguagesSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={langList => handleUpdateEmployeeData({ langList })}
                                    saveAction={saveLanguages}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                            {/* 专业技能 */}
                            <div id="Skills">
                                <SkillSection
                                    readonly={readonly}
                                    formData={employeeArchivesData}
                                    onChange={skillList => handleUpdateEmployeeData({ skillList })}
                                    saveAction={saveSkill}
                                    isEntryGuide={isEntryGuide}
                                />
                            </div>
                        </Col>
                        <Col span={3} offset={1}>
                            <Anchor
                                style={{ zIndex: -1 }}
                                showInkInFixed
                                targetOffset={50}
                                getContainer={() =>
                                    getTabContainer() || document.querySelector('[data-anchor-container]')
                                }
                            >
                                <Anchor.Link href="#BasicInfo" title="个人信息" />
                                <Anchor.Link href="#EmergencyContact" title="紧急联系人" />
                                <Anchor.Link href="#WorkExperience" title="工作经历" />
                                <Anchor.Link href="#EducationalExperience" title="教育经历" />
                                <Anchor.Link href="#FamilyMember" title="家庭成员" />
                                <Anchor.Link href="#TrainingExperience" title="培训经历" />
                                <Anchor.Link href="#AwardRecord" title="获奖记录" />
                                <Anchor.Link href="#Languages" title="语言能力" />
                                <Anchor.Link href="#Skills" title="专业技能" />
                            </Anchor>
                        </Col>
                    </Row>
                )}
            </Skeleton>
        </div>
    );
};

// prop
EmployeeArchives.propTypes = {
    employeeCode: PropTypes.string.isRequired,
    readonly: PropTypes.bool
};

EmployeeArchives.defaultProps = {
    readonly: false
};

export default React.memo(EmployeeArchives);
